<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Веб-дизайн + верстка</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width">
  <link rel="stylesheet" href="css/style.min.css" type="text/css" />
</head>
<body>
<div class="container">
  <div class="wrap">
    <header class="header">
      <div class="header__left">
        <a target="_blank" href="https://webformyself.com/">
          <img src="img/logo.png" alt="WebForMyself">
        </a>
      </div>
    </header>
    <section class="content">
      <nav class="content__left">
        <ul class="content__menu menu">
          <li class="menu__element">
            <a class="menu__link" href="/index.html">Главная</a>
          </li>
          <li class="menu__element">
            <a target="_blank" class="menu__link" href="https://webformyself.com/nashi-kursy/">Другие инфопродукты</a>
          </li>
          <li class="menu__element">
            <a target="_blank" class="menu__link" href="https://webformyself.com/forum/">Поситите наш форум</a>
          </li>
          <li class="menu__element">
            <a target="_blank" class="menu__link" href="https://webformyself.support-desk.ru/">Служба поддержки</a>
          </li>
        </ul>
      </nav>
      <div class="content__name">
        <img src="img/name-course.png" alt="">
      </div>
      <div class="content__videoblock">
        <a href="part1.html">
          <img src="img/block1.png" alt="">
          <p>Раздел 1 <span>41</span></p>
          <p>Веб-дизайн</p>
        </a>
        <a href="part2.html">
          <img src="img/block2.png" alt="">
          <p>Раздел 2 <span>25</span></p>
          <p>Верстка</p>
        </a>
      </div>
      <main class="content__right">
        <ul class="bonus content__bonus">
          <li class="bonus__element">
            <a class="bonus__link" href="bonus1.html">
              <img class="bonus__icon" src="img/icon1.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 1.</p>
                <p>Интерактивный прототип</p>
              </div>
              <span class="bonus__lessons">1</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus2.html">
              <img class="bonus__icon" src="img/icon11.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 2.</p>
                <p>7 лайфхаков по работе в Figma</p>
              </div>
              <span class="bonus__lessons">1</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus3.html">
              <img class="bonus__icon" src="img/icon2.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 3.</p>
                <p>Премиум курс. Учебник по основам HTML для начинающих</p>
              </div>
              <span class="bonus__lessons">8</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
            <article class="content_main list">
              <p class="list__block"></p>
              <p class="list__lesson">
                <span class="list__number">Урок 1.</span>
                <a class="list__link" href="bonus3/bonus3_1.html">Введение. Основы HTML</a>
              </p>
              <p class="list__lesson">
                <span class="list__number">Урок 2.</span>
                <a class="list__link" href="bonus3/bonus3_2.html">Структура HTML документа</a>
                <a class="list__source" href="bonus3/2/">
                  <img src="img/source.png" alt="Исходник">
                </a>
              </p>
              <p class="list__lesson">
                <span class="list__number">Урок 3.</span>
                <a class="list__link" href="bonus3/bonus3_3.html">Теги форматирования текста</a>
                <a class="list__source" href="bonus3/3/">
                  <img src="img/source.png" alt="Исходник">
                </a>
              </p>
              <p class="list__lesson">
                <span class="list__number">Урок 4.</span>
                <a class="list__link" href="bonus3/bonus3_4.html">Изображения</a>
                <a class="list__source" href="bonus3/4/">
                  <img src="img/source.png" alt="Исходник">
                </a>
              </p>
              <p class="list__lesson">
                <span class="list__number">Урок 5.</span>
                <a class="list__link" href="bonus3/bonus3_5.html">Ссылки. Ссылки-изображения</a>
                <a class="list__source" href="bonus3/5/">
                  <img src="img/source.png" alt="Исходник">
                </a>
              </p>
              <p class="list__lesson">
                <span class="list__number">Урок 6.</span>
                <a class="list__link" href="bonus3/bonus3_6.html">Списки</a>
              </p>
              <p class="list__lesson">
                <span class="list__number">Урок 7.</span>
                <a class="list__link" href="bonus3/bonus3_7.html">Таблицы</a>
                <a class="list__source" href="bonus3/7/">
                  <img src="img/source.png" alt="Исходник">
                </a>
              </p>
              <p class="list__lesson">
                <span class="list__number">Урок 8.</span>
                <a class="list__link" href="bonus3/bonus3_8.html">Формы</a>
                <a class="list__source" href="bonus3/8/">
                  <img src="img/source.png" alt="Исходник">
                </a>
              </p>
            </article>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus4.html">
              <img class="bonus__icon" src="img/icon3.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 4.</p>
                <p>Премиум курс. Учебник по основам CSS для начинающих</p>
              </div>
              <span class="bonus__lessons">10</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus5.html">
              <img class="bonus__icon" src="img/icon4.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 5.</p>
                <p>Премиум курс. Верстка сайта для начинающих</p>
              </div>
              <span class="bonus__lessons">5</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus6.html">
              <img class="bonus__icon" src="img/icon5.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 6.</p>
                <p>Премиум курс. HTML5. Основы</p>
              </div>
              <span class="bonus__lessons">13</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus7.html">
              <img class="bonus__icon" src="img/icon6.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 7.</p>
                <p>Премиум курс. CSS3. Основы</p>
              </div>
              <span class="bonus__lessons">20</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus8.html">
              <img class="bonus__icon" src="img/icon7.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 8.</p>
                <p>Премиум курс. Теория и практика адаптивной верстки</p>
              </div>
              <span class="bonus__lessons">10</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus9.html">
              <img class="bonus__icon" src="img/icon8.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 9.</p>
                <p>Премиум курс. CSS Grid Layout</p>
              </div>
              <span class="bonus__lessons">13</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus10.html">
              <img class="bonus__icon" src="img/icon9.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 10.</p>
                <p>Премиум курс. Flexbox</p>
              </div>
              <span class="bonus__lessons">7</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
          <li class="bonus__element">
            <a class="bonus__link" href="bonus11.html">
              <img class="bonus__icon" src="img/icon10.svg" alt="">
              <div class="bonus__name">
                <p>Бонус 11.</p>
                <p>Премиум курс. Препроцессор Sass</p>
              </div>
              <span class="bonus__lessons">10</span>
              <img src="img/down-arrow.svg" alt="">
            </a>
          </li>
        </ul>
      </main>
    </section>
  </div>
  <footer class="footer">
    <div class="footer__wrap wrap">
      <div class="footer__block">
        <p class="footer__copy">Все права защищены.<br> WebForMySelf, &copy; 2019</p>
        <p class="footer__zakon">«Любое незаконное использование настоящего информационного<br> продукта преследуется по закону»</p>
        <p class="footer__author">Авторы курса:<br>Даниил Волосатов<br>Денис Булыга</p>
        <a target="_blank" href="https://webformyself.com/">
          <img src="img/logo.png" alt="WebForMyself">
        </a>
      </div>
      <p class="footer__graph">
        *Иконки взяты с сайта <a target="_blank" href="https://www.flaticon.com/">www.flaticon.com</a>
      </p>
    </div>
  </footer>
</div>
</body>
</html>